<template>
  <movable-area class="page-scroll">
    <scroll-view class="scroll-y" scroll-y="true">
      <uni-list>
        <template v-for="(item,index) in list">
          <uni-list-item :key="index" clickable :title="item.babelName" :note="item.remark" thumb-size="lg">
            <template slot="footer">
              <uni-icons type="compose" @click="edit(item)" size="24" color="#3487D3"></uni-icons>
            </template>
          </uni-list-item>
        </template>
      </uni-list>
    </scroll-view>
    <movable-view :x="x" :y="y" direction="all" inertia class="icons" @tap="add()">
      <uni-icons type="plus-filled" size="50" color="#ED7467"></uni-icons>
    </movable-view>
    <uni-popup ref="popup" type="center">
      <view class="popupView">
        <view class="prompt">新增/修改标签</view>
        <view class="cell">
          <view class="title">
            <input maxlength="10" v-model="form.babelName" placeholder="请输入标签姓名" />
          </view>
        </view>
        <view class="cell">
          <view class="title">
            <input maxlength="200" v-model="form.remark" placeholder="请输入备注" />
          </view>
        </view>
      </view>
      <view class="botton popupBotton">
        <button class="botton-botton" @click="addTag()">提交</button>
      </view>
    </uni-popup>
  </movable-area>
</template>
<style lang="scss" scoped>
.page-scroll {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .icons {
    width: 50px;
    height: 50px;
    z-index: 9999;
  }
}
.popupView {
  padding: 10px 3vw;
  width: 80vw;
  border-radius: 4px;
  overflow: auto;
  background: #fff;
}

.botton {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  &-botton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 20px;
    width: 35vw;
    color: #fff;
    background: #ed7467;
  }
}
.popupBotton {
  background: #fff;
}
.prompt {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  padding: 20px 0;
}
.cell {
  width: 100%;
  padding: 10px;
  .title {
    height: 45px;
    width: 100%;
    background: #f6f6f6;
    border-radius: 10px;
    font-weight: bold;
    input {
      width: 100%;
      height: 100%;
      padding-left: 10px;
    }
  }
}
</style>


<script>
export default {
  data() {
    return {
      list: [],
      x: 500,
      y: 1000,
      form: {
        babelName: '',
        remark: '',
        id: ''
      }
    }
  },
  onLoad() {
    this.getTagList()
  },
  methods: {
    getTagList() {
      let _this = this
      _this.$post('/sale/wx/sys_babel/get_datas', {}, false).then(res => {
        if (res.code * 1 === 200) {
          _this.list = res.data
        }
      })
    },
    add() {
      this.form = this.$options.data().form
      this.$refs.popup.open()
    },
    edit(row) {
      const { babelName, remark, id } = row
      this.form = { babelName, remark, id }
      this.$refs.popup.open()
    },
    addTag() {
      let _this = this
      if (!_this.form.babelName) {
        uni.showToast({
          icon: "none",
          title: "請輸入标签名",
          position: "bottom"
        })
        return
      }
      if (_this.form.id) {
        _this.$post('/sale/wx/sys_babel/update_data', { ..._this.form }, true).then(res => {
          if (res.code * 1 === 200) {
            uni.showToast({
              icon: "none",
              title: "修改成功",
              position: "bottom"
            })
            _this.$refs.popup.close()
            _this.getTagList()

          }
        })
        return
      }
      _this.$post('/sale/wx/sys_babel/add_data', { ..._this.form }, true).then(res => {
        if (res.code * 1 === 200) {
          uni.showToast({
            icon: "none",
            title: "添加成功",
            position: "bottom"
          })
          _this.$refs.popup.close()
          _this.getTagList()

        }
      })

    },
  }

}
</script>